<template>
  <div>
    <van-row gutter="20" class="title_left">
      <van-col span="8" style="padding-top: 45px">
        <a @click="back" class="back_a" style="color: white; margin-left: 10px">
          返回
        </a>
      </van-col>
      <van-col
        span="8"
        style="text-align: center; color: white; padding-top: 45px"
        >用车记录</van-col
      >
      <van-col span="8"></van-col>
    </van-row>
    <van-row class="topMargin">
      <van-col span="24">
        <van-row>
          <van-col span="24">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <van-cell
                v-for="item in car_list"
                :key="item.id"
                @click="toDetail(item)"
                is-link
              >
                <template #label>
                  <div>使用方式: {{ syfsEnum(item.status) }}</div>
                  <div>
                    主机厂品牌 - 车系 :
                    {{
                      item.vehicleInfo.vehicleSeries.seriesFactory +
                      item.vehicleInfo.vehicleSeries.seriesName +
                      item.vehicleInfo.vehicleBrand.brandName +
                      item.vehicleInfo.vehicleBrand.brandCode
                    }}
                  </div>
                </template>
                <template #title>
                  <div>
                    车牌号: {{ item.vehicleInfo.plateNum }}
                    <van-tag
                      v-if="item.vehicleInfo.vehicleType === 1"
                      type="primary"
                      >试</van-tag
                    >
                    <van-tag
                      v-else-if="item.vehicleInfo.vehicleType === 2"
                      type="primary"
                      >客</van-tag
                    >
                    <van-tag
                      v-else-if="item.vehicleInfo.vehicleType === 3"
                      type="primary"
                      >救</van-tag
                    >
                  </div>
                </template>
              </van-cell>
            </van-list>
          </van-col>
        </van-row>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Api } from "../../../api/api_config";

export default {
  data() {
    return {
      car_list: [],
      page: 1,
      pageSize: 5,
      loading: false,
      finished: false,
      currentUser: {},
      totalCount: 0,
    };
  },
  created() {
    this.initData();
  },
  mounted() {},
  methods: {
    initData() {
      this.$store.state.tab_show = false;
      // 获取company对象
      this.currentUser = this.$store.state.configuration.currentUser;
    },
    back() {
      this.$store.state.tab_show = true;
      this.$router.push("/carUsage");
    },
    toDetail(item) {
      this.$store.state.useRecord = item
      this.$router.push("/carUsage/usageLog/logDetail");
    },
    onLoad() {
      this.loading = true;
      this.getVehicle();
    },    
    syfsEnum(value) {
      switch (value) {
        case 1:
          return "试驾";
        case 2:
          return "客用";
        case 3:
          return "救援";
        case 4:
          return "维保";
        case 5:
          return "挪车";
        case 6:
          return "加油";
      }
    },
    getVehicle() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      let that = this;
      let url =
        Api.useRecord.useRecord.url +
        "?CreatorId=" +
        this.currentUser.id +
        "&page=" +
        this.page +
        "&pagesize=" +
        this.pageSize;
      this.$axios({
        method: Api.useRecord.useRecord.method,
        url: url,
      })
        .then(function (response) {
          that.page = that.page + 1;
          response.data.items.forEach((element) => {
            that.car_list.push(element);
          });
          that.totalCount = response.data.totalCount;
          that.loading = false;
          if (that.car_list.length >= that.totalCount) {
            // console.log(that.car_list);
            that.finished = true;
          }
          Toast.clear();
        })
        .catch(function (error) {
          console.log(error);
          Toast.clear();
        });
    }
  },
};
</script>

<style scoped>
</style>
